<!-- 用户发表卡片 -->
<template>
  <div style="margin-bottom: 10px">
    <div class="s-6c23e4ee">
      <div class="s214e0dbe">
        <!-- 头像 -->
        <div class="s305819ac">
          <div class="s-1c89ddc8">
            <img alt="" title="" src="../../assets/ShowPic/pic.jpg" class="s33fa2c34" style="background: none; width: 38px; height: 38px" />
          </div>
        </div>
        <!-- 用户名 -->
        <div class="s259d1f46">
          <div class="s3db153a2">点心新兵</div>
        </div>
        <!-- 发表时间 -->
        <div class="s5e6053ac">
          <span>17分钟前</span>
          <span class="s7ba00fa8"></span>
        </div>
      </div>
      <!-- 标签 -->
      <div class="s60b56aea">
        <span class="s4e2e19bb">#外面吃去#</span>
        <span></span>
      </div>
      <!-- 评论图 -->
      <div style="margin-bottom: 11px">
        <div class="s-368ce4c7">
          <div class="s-1f31d5de" style="width: 66.66%">
            <img alt="" title="" src="../../assets/ShowPic/pic.jpg" class="s515f16b0" style="background: none; width: 227px; height: 170.25px" />
          </div>
          <a class="s4d160f27 s-202ce559" href="/dish/16622280"></a>
        </div>
      </div>
      <!-- <div class="s124b1911">10次浏览</div> -->
      <!-- 功能栏 -->
      <div class="s-2ca7dcb7">
        <!-- 点赞 -->
        <div class="s-77fbb56d">
          <div class="s-2443e06d">
            <img alt="" title="" src="" class="s-34f4f4a1" />
          </div>
          <div class="s70932adf">24</div>
        </div>
        <!-- 打赏 -->
        <div class="s-77fbb56d">
          <div class="s-2443e06d">
            <img alt="" title="" src="" class="s-34f4f4a1" />
          </div>
          <div class="s70932adf">打赏</div>
        </div>
        <!-- 评论 -->
        <div class="s-77fbb56d">
          <div class="s-2443e06d">
            <img alt="" title="" src="" class="s-34f4f4a1" />
          </div>
          <div class="s70932adf">评论</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
.s-6c23e4ee {
  position: relative;
  overflow: hidden;
  zoom: 1;
  background-color: #ffffff;
}
// 用户基础信息
.s214e0dbe {
  margin: 10px 15px;
  overflow: hidden;
}
//头像
.s305819ac {
  width: 40px;
  height: 40px;
  float: left;
  font-size: 0;
  margin-right: 10px;
}
.s-1c89ddc8 {
  width: 100%;
  height: 100%;
  font-size: 0;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.s33fa2c34 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid;
  border-color: #e7e2e5;
}
//用户名
.s259d1f46 {
  overflow: hidden;
  height: 20px;
  display: inline-block;
  max-width: 66%;
  margin-right: 0;
}
.s3db153a2 {
  font-size: 13px;
  height: 20px;
  line-height: 20px;
  text-align: left;
  color: #4a4945;
  overflow: hidden;
  text-overflow: ellipsis;
  -otext-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -moz-text-overflow: ellipsis;
  white-space: nowrap;
}
//发表时间
.s5e6053ac {
  text-align: left;
  font-size: 12px;
  height: 20px;
  line-height: 20px;
  color: #999999;
  overflow: hidden;
  text-overflow: ellipsis;
  -otext-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -moz-text-overflow: ellipsis;
  white-space: nowrap;
}
//标签
.s60b56aea {
  margin: 10px 15px 11px;
  font-size: 14px;
  color: #4a4945;
  line-height: 20px;
  max-height: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: box;
  display: -moz-box;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -moz-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
}
.s4e2e19bb {
  font-size: 14px;
  line-height: 20px;
  display: inline-block;
  color: #498dd0;
}
//发表图
.s-368ce4c7 {
  position: relative;
  margin: 0 11px;
  padding: 0;
  overflow: hidden;
  zoom: 1;
}
.s-1f31d5de {
  display: inline-block;
  width: 33.333%;
  font-size: 0;
  padding: 4px;
  margin: 0;
  overflow: hidden;
  box-sizing: border-box;
}
.s4d160f27 {
  display: block;
  text-decoration: none;
}
.s-202ce559 {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.s515f16b0 {
  position: relative;
  width: 100%;
  overflow: hidden;
  z-index: 2;
}
//功能栏
.s-2ca7dcb7 {
  height: 30px;
  box-sizing: border-box;
  margin: 0 15px;
  border-top: 1px solid;
  border-top-color: #e7e2e5;
}
.s-77fbb56d {
  display: inline-block;
  width: 33.333%;
  text-align: center;
  height: 20px;
  line-height: 20px;
  margin-top: 4px;
  box-sizing: border-box;
  border-right: 1px solid;
  border-right-color: #e7e2e5;
}
.s-2443e06d {
  font-size: 0;
  width: 19px;
  height: 19px;
  vertical-align: middle;
  display: inline-block;
}
.s70932adf {
  font-size: 12px;
  color: #999999;
  margin-left: 5px;
  vertical-align: middle;
  display: inline-block;
}
.s-34f4f4a1 {
  width: 100%;
  overflow: hidden;
}
</style>